import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() {
  runApp(new MapPlugin());
}

/*
 * 卡片组件 <br/>
 * 需要传入的键：<br/>
 * 传入的值类型： <br/>
 * 传入的值含义：<br/>
 * 是否必传 ：
 */
class MapPlugin extends StatefulWidget {
  State<StatefulWidget> createState() {
    return new MapPluginState();
  }
}

/*
 * 页面功能 <br/>
 */
class MapPluginState extends State<StatefulWidget> {
  List<LatLng> tappedPoints = [];

  void initState() {
    super.initState();
  }

  Widget build(BuildContext context) {
    var markers = tappedPoints.map((latlng) {
      return Marker(
        width: 80.0,
        height: 80.0,
        point: latlng,
        builder: (ctx) => Container(
          child: FlutterLogo(),
        ),
      );
    }).toList();


    AppBar appBar = AppBar(
      leading: new IconButton(
        icon: new Icon(Icons.arrow_back),
        onPressed: () {},
      ),
      title: new Text('FlutterDesign'),
      centerTitle: true,
      actions: <Widget>[
        new Container(width: 0, height: 0),
        new Container(width: 0, height: 0),
      ],
      backgroundColor: Colors.blue,
    );

    return MaterialApp(
      home: new Scaffold(
        appBar: appBar,
        body: new Builder(builder: (BuildContext context) {
          return FlutterMap(
            options: MapOptions(
                center: LatLng(45.5231, -122.6765),
                zoom: 13.0,
                onTap: _handleTap),
            layers: [
              TileLayerOptions(
                urlTemplate:
                'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              ),
              MarkerLayerOptions(markers: markers)
            ],
          );
        }),
        backgroundColor: Colors.white,
        bottomNavigationBar: null,
      ),
    );
  }

  void _handleTap(LatLng latlng) {
    setState(() {
      tappedPoints.add(latlng);
    });
  }
}
